<template>
  <view class="moreqifu">
    <view class="content">
      <view class="lists" v-for="(item, index) in qifuList" :key="index">
        <image
          class="imgs"
          :src="img + item.cover_image"
          mode="aspectFill"
        />
        <view class="rig">
          <view class="top">
            <h3>{{ item.title }}</h3>
            <h4>{{ item.description }}</h4>
          </view>
          <view class="bott">
            <view class="nums">
              <image
                class="canyIcon"
                src="https://www.123qifu.com/onlineimages/static/canyIcon.png"
                mode="widthFix"
              />
              {{ item.join_num }}人参与
            </view>
            <!-- <view
              class="btns"
              @click="tooffering(item)"
              v-if="item.type == 1 ? true : false"
              >供奉</view
            >
            <view
              class="btns"
              @click="tokaiguang(item)"
              v-if="item.type == 2 ? true : false"
              >开光</view
            > -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qifuList: [],
      kaigID: "",
      img:"https://www.123qifu.com/"
    };
  },
  onShow() {
    this.getqifuList();
  },
  methods: {
    // 获取祈福列表
    async getqifuList() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/home",
        method: "GET",
        data: {
          pageSize: 10,
        },
      });
      that.qifuList = res.data.data.data;
    },
    // 供奉
    tooffering(item) {
      uni.navigateTo({
        url: "../../pray/Offering/Offering?id=" + item.id,
      });
      uni.setStorage({
        key: "gfList",
        data: item,
      });
    },
    // 开光
    tokaiguang(item) {
      this.kaigID = item.id;
      //   this.$refs.kaiguang.open();
      uni.navigateTo({
        url: "../../pray/long-range/long-range?pray_id=" + this.kaigID,
      });
      uni.setStorage({
        key: "kgList",
        data: item,
      });
    },
    // 远程开光
    tolongrange(kaigID) {
      this.$refs.kaiguang.close();
      uni.navigateTo({
        url: "../../pray/long-range/long-range?pray_id=" + kaigID,
      });
    },
    // 线下开光
    tooffline(kaigID) {
      this.$refs.kaiguang.close();

      uni.navigateTo({
        url: "../../pray/kaiguang/kaiguang?pray_id=" + kaigID,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.moreqifu {
  .content {
    min-height: calc(100vh - 108rpx);
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 30rpx;
    border-top: 20rpx solid #f4f4f4;
    .lists {
      width: 100%;
      box-sizing: border-box;
      padding: 28rpx 0;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .imgs {
        width: 180rpx;
        height: 200rpx;
        margin-right: 18rpx;
        border-radius: 8rpx;
      }
      .rig {
        height: 200rpx;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .top {
          font-size: 28rpx;
          font-weight: 400;
          color: #373737;
          display: block;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          h3 {
            font-size: 30rpx;
            font-weight: 500;
            color: #373737;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          h4 {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            margin-top: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .bott {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .nums {
          display: flex;
          align-items: center;
          font-size: 20rpx;
          font-weight: 400;
          color: #999999;
          .canyIcon {
            display: block;
            width: 18rpx;
            height: 18rpx;
            margin-right: 10rpx;
          }
        }
        .btns {
          display: block;
          width: 114rpx;
          height: 50rpx;
          background: #c52b2e;
          border-radius: 25rpx;
          text-align: center;
          line-height: 50rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .lists:last-child {
      border-bottom: none;
    }
  }
}
</style>
